<template>
  <div class="app-container">
    <div class="app-title">
      <span>上报时间控制</span>
    </div>
    <div class="filter-container">
      <el-row>
        <el-form
          ref="dataForm"
          :rules="dataFormRules"
          :model="formData"
          label-position="right"
          label-width="100px"
          size="small"
        >
          <el-row />
          <div class="contentBorder">
            <el-row>
              <el-col :span="12">
                <span>每月开始填报工资的日期：</span>
              </el-col>

              <el-col :span="4">
                <el-form-item prop="startSalaryTime">
                  <!-- <el-date-picker
                    v-model="formData.startSalaryTime"
                    type="date"
                    format="dd"
                    placeholder="选择日期时间"
                  /> -->
                  <el-select v-model="formData.startSalaryTime" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <span>每月结束工资上报的日期：</span>
              </el-col>

              <el-col :span="4">
                <el-form-item prop="endSalaryTime">
                  <!-- <el-date-picker
                    v-model="formData.endSalaryTime"
                    type="date"
                    format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  /> -->
                  <el-select v-model="formData.endSalaryTime" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-button
                  size="small"
                  class="filter-item"
                  style="margin-left: 10px"
                  type="primary"
                  :loading="toUpdateLoading"
                  @click="toUpdate"
                >
                  保存
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getReportTimeControl,
  updateReportTimeControl
} from '@/api/submitTimeControl/submitTimeControl'
export default {
  name: 'WarningSet',
  data() {
    return {
      listLoading: true,
      toUpdateLoading: false,
      dataFormRules: {
        startSalaryTime: [
          { required: true, message: '不能为空值', trigger: 'blur' }
        ],
        endSalaryTime: [
          { required: true, message: '不能为空值', trigger: 'blur' }
        ]
      },
      formData: {
        id: '',
        startSalaryTime: '',
        endSalaryTime: ''
      },
      options: [{
        value: '01',
        label: '01'
      }, {
        value: '02',
        label: '02'
      }, {
        value: '03',
        label: '03'
      }, {
        value: '04',
        label: '04'
      }, {
        value: '05',
        label: '05'
      }, {
        value: '06',
        label: '06'
      }, {
        value: '07',
        label: '07'
      }, {
        value: '08',
        label: '08'
      }, {
        value: '09',
        label: '09'
      }, {
        value: '10',
        label: '10'
      }, {
        value: '11',
        label: '11'
      }, {
        value: '12',
        label: '12'
      }, {
        value: '13',
        label: '13'
      }, {
        value: '14',
        label: '14'
      }, {
        value: '15',
        label: '15'
      }, {
        value: '16',
        label: '16'
      }, {
        value: '17',
        label: '17'
      }, {
        value: '18',
        label: '18'
      }, {
        value: '19',
        label: '19'
      }, {
        value: '20',
        label: '20'
      }, {
        value: '21',
        label: '21'
      }, {
        value: '22',
        label: '22'
      }, {
        value: '23',
        label: '23'
      }, {
        value: '24',
        label: '24'
      }, {
        value: '25',
        label: '25'
      }, {
        value: '26',
        label: '26'
      }, {
        value: '27',
        label: '27'
      }, {
        value: '28',
        label: '28'
      }, {
        value: '29',
        label: '29'
      }, {
        value: '30',
        label: '30'
      }, {
        value: '31',
        label: '31'
      }],
      value: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getReportTimeControl().then((response) => {
        this.formData = response.data

        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList()
    },
    toUpdate() {
      if (this.formData.startSalaryTime > this.formData.endSalaryTime) {
        this.$message({
          showClose: true,
          message: '结束工资上报的日期要大于开始填报工资的日期',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.toUpdateLoading = true
          updateReportTimeControl(this.formData).then((response) => {
            this.dialogFormVisible = false
            this.$message({
              showClose: true,
              message: '保存成功',
              type: 'success',
              duration: 4000
            })
            this.toUpdateLoading = false
            this.handleFilter()
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.contentBorder {
  // border: #e5e6eb solid 1px;
  box-shadow:2px 2px 5px #e5e6eb;
  width: 90%;
  margin-top:50px;
  text-align: center;
  margin-left: 3%;
  .el-row:nth-child(1) {
    padding-top: 30px;
    .el-col:nth-child(1) {
      text-align: center;
    }
    .el-col:nth-child(3) {
      .el-input {
        margin-top: -10px;
      }
    }
    .el-col:nth-child(4) {
      text-align: right;
    }
  }
  .el-row:nth-child(2) {
    padding-top: 20px;
    padding-bottom: 30px;
    .el-col:nth-child(1) {
      text-align: right;
    }
  }
  .el-row:nth-child(3) {
    padding-top: 50px;
    padding-bottom: 30px;
    border-top: rgba(121, 121, 121, 1) solid 1px;
    .el-col:nth-child(1) {
      text-align: center;
    }
    .el-col:nth-child(3) {
      .el-input {
        margin-top: -10px;
        padding: 0px 5px 0px 10px;
      }
    }
    .el-col:nth-child(4) {
      text-align: right;
    }
  }
}
</style>
